<template>
  <q-dialog v-model="弹窗否" position="right">
    <div class="bg-white q-pa-md " style=" max-width: 60vw;">
      <q-toolbar class="min-h-40px q-gutter-x-sm">
        <q-btn-dropdown push>
          <template v-slot:label>
            <div class="row items-center no-wrap">
              <q-icon left name="filter_alt" />
              <q-badge color="orange" floating v-if="list.筛选.单项组.length > 0">{{ list.筛选.单项组.length }}</q-badge>
              <div class="text-center">
                筛选
              </div>
            </div>
          </template>
          <q-list class="min-w-80 q-pa-sm">
            <q-toolbar class="min-h-40px flex-center q-gutter-x-sm">
              <q-btn dense text-color="primary" label="新增" icon="add" @click="list.筛选.增()" />
              <q-btn dense text-color="primary" label="应用" icon="done" @click="list.筛选.保存()" />
              <q-btn dense text-color="negative" label="清除" icon="clear" @click="list.筛选.清除()" />
            </q-toolbar>
            <q-separator spaced />
            <q-item clickable v-for="(item) in list.筛选.单项组">
              <q-item-section top>
                <div class="row no-wrap">
                  <q-select class="col-4" outlined dense v-model="item.字段名" :options="list.筛选.供筛选字段名s.value"
                    label="字段名" />
                  <q-select class="col-4" outlined dense v-model="item.比较运算符" :options="item.候选比较运算符" label="比较运算符" />
                  <template v-if="item.百分数">
                    <q-input class="w-28" outlined dense v-model.number="item.百分数" placeholder="百分数……" label="?%">
                    </q-input>
                    <q-input outlined dense v-model.number="item.基准数" label="基准数" placeholder="基准数……">
                    </q-input>
                  </template>
                  <template v-else>
                    <q-input outlined dense v-model="item.字段值" placeholder="关键词……">
                    </q-input>
                  </template>
                </div>
              </q-item-section>
              <q-item-section side>
                <q-btn class="gt-xs" size="12px" flat dense round icon="clear" @click="list.筛选.删(item)" />
              </q-item-section>

            </q-item>
          </q-list>
        </q-btn-dropdown>
      </q-toolbar>
      <q-separator />
      <el-table :ref="list.表ref" border tooltip-effect="dark" :data="单项组" @selection-change="list.选中变了"
        style="height: 60vh;" row-key="id" @sort-change="list.sortChange" :default-sort="a.默认排序"
        empty-text="空空如也~~" highlight-current-row>
        <!-- <a列表字段 :插组件="插组件" /> -->
        <!-- <a列表字段 :插组件="插组件" :指定字段名组="指定字段名组" /> -->
      </el-table>
      <div class="gva-pagination">
        <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="req.page"
          :page-size="req.pageSize" :page-sizes="a.可选页面容量" :total="a.total" @current-change="list.跳转页面"
          @size-change="list.改单页条数" />
      </div>
    </div>
  </q-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
import *  as util from '@/utils'
import a列表字段 from '@/components/a列表字段.vue';
import * as 插组件util from '@/amtf/api/插组件util';

const props = withDefaults(defineProps<{
  父字段: 字段;
  父插组件?: 插组件;
  指定字段名组?: string[];
  父单项: 单项;
}>(), {});

const modelValue = defineModel()
const 弹窗否 = ref(true)
import use插组件 from "@/hooks/use插组件"
// console.log(`props.父字段.关联组件 👉`, props.父字段.关联组件)
const 组件id = 插组件util.split取组件id(props.父字段.候选值源字段!)
console.log(`弹窗搜索表 组件id 👉`, 组件id)
// const 插组件 = use插组件({ 组件id })
const cfg = {
  req: {
    pageSize: 20,
  },
  关联组件id: 组件id
}
import use from '@/hooks/uselist';
const list = use(cfg)
const { 插组件, a, 单项组, req } = list

defineExpose({ 弹窗否 })

// let arr = [{
//       字段名: "部门id",
//       比较运算符: "in",
//       字段值: 末级ids,
//     }]

// list.筛选.改且保存(arr)

watch(弹窗否, (newValue, oldValue) => {
  modelValue.value = 弹窗否.value
})

</script>

<style scoped>
:deep(.el-table .el-table__cell) {
  z-index: auto;
}
</style>
